<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>发票开具</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
		<style>
			#tools_comfirm p {
				font-size: 16px;
				line-height: 35px;
			}
		</style>
	</head>

	<body class="mui-fullscreen">
		<!--页面主结构开始-->
		<div id="app" class="mui-views">
			<div class="mui-view">
				<div class="mui-navbar">

				</div>
				<div class="mui-pages">

					<nav class="mui-bar mui-bar-tab">
						<a class="mui-tab-item goHome mui-active" href="javascript:;">
							<span class="mui-icon mui-icon-home"></span>
							<span class="mui-tab-label">首页</span>
						</a>
						<a class="mui-tab-item" href="javascript:;">
							<span class="mui-icon mui-icon-camera"></span>
							<span class="mui-tab-label">摄像头</span>
						</a>
						<a class="mui-tab-item goHome" href="javascript:;">
							<span class="mui-icon mui-icon-person"></span>
							<span class="mui-tab-label">服务</span>
						</a>
					</nav>

				</div>
			</div>
		</div>
		<!--页面主结构结束-->
		<!--单页面开始-->
		<div id="setting" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">发票查询</h1>
				<a href="#tools_open" type="button" class="mui-btn mui-btn-grey mui-btn-outlined mui-pull-right" style="padding: 5px;color: #333;" id="toolsOpen">开票</a>				
			</div>
			<!--页面标题栏结束-->
			<!--页面主内容区开始-->
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">

						<ul class="mui-table-view">
							<li class="mui-input-row mui-search">
							    <input type="search" class="mui-input-clear" placeholder="搜索" style="background-color: transparent;border: 1px solid #ccc;width: 98%;margin: 1%;">
							</li>
							
							<li class="mui-table-view-cell">
					            <a href="/">
					                1
					            </a>
					        </li>
					        <li class="mui-table-view-cell">
					            <a href="/">
					                 2
					            </a>
					        </li>
					        <li class="mui-table-view-cell">
					            <a href="/">
					                 3
					            </a>
					        </li>
						</ul>

					</div>
				</div>
			</div>
			<!--页面主内容区结束-->
		</div>
		<!--单页面结束-->
		<div id="tools_open" class="mui-page">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<h1 class="mui-center mui-title">发票开具</h1>
			</div>
			<div class="mui-page-content">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<ul class="mui-table-view">
					        <li class="mui-table-view-cell">
					            <a href="/">
									选择订单&nbsp;&nbsp;&nbsp;<span class="mui-icon mui-icon-plus"></span>
					            </a>
					        </li>					        
					        <li class="mui-table-view-cell" id="tools_comfirm">
					        	    <div class="mui-input-row">
					        	        <label>收件人：</label>
					        	        <input type="text" class="mui-input-clear" placeholder="输入收件人">
					        	    </div>
					        	    <div class="mui-input-row">
					        	        <label>联系电话：</label>
					        	        <input type="text" class="mui-input-clear" placeholder="请输入电话">
					        	    </div>
					        	    <div class="mui-input-row">
					        	        <label>地址：</label>
					        	        <input type="text" class="mui-input-clear" placeholder="请输入地址">
					        	    </div>
					        	<!--</form>-->
					        	
					        	
					            <!--<p>收件人：</p>
					            <p>联系电话：</p>
					            <p>地址：</p>-->
					            <p class="mui-content-padded">
					            	<button type="button" class="mui-btn mui-btn-block mui-btn-blue">确认</button>
					            </p>						            
					        </li>					        
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div id="reg_success" class="mui-page feedback">
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-btn mui-btn-grey mui-btn-outlined mui-pull-right" style="padding: 5px;color: #333;" id="login">登陆</button>
				<h1 class="mui-center mui-title">注册成功</h1>
			</div>
			<div class="mui-page-content">
				<div class="reg_success" style="text-align: center;padding-top: 20%;">
					<p><span class="mui-icon mui-icon-weixin" style="font-size: 100px;"></span></p>
					<p>姓名：守望先锋</p>
					<p>密码：1234567</p>
					<p>手机：1234567</p>
					<p>邮箱：1234567@qq.com</p>
					<p>身份证：1234567</p>
					<p>推荐码：123</p>
				</div>
			</div>
		</div>

	</body>
	<script src="js/mui.min.js "></script>
	<script src="js/mui.view.js "></script>
	<script>
		mui.init();
		//初始化单页view
		var viewApi = mui('#app').view({
			defaultPage: '#setting'
		});
		//初始化单页的区域滚动
		mui('.mui-scroll-wrapper').scroll();
		var view = viewApi.view;
		(function($) {
			//处理view的后退与webview后退
			var oldBack = $.back;
			$.back = function() {
				if(viewApi.canBack()) { //如果view可以后退，则执行view的后退
					viewApi.back();
				} else { //执行webview后退
					oldBack();
				}
			};
			//监听页面切换事件方案1,通过view元素监听所有页面切换事件，目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
			//第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
			view.addEventListener('pageBeforeShow', function(e) {
				//				console.log(e.detail.page.id + ' beforeShow');
			});
			view.addEventListener('pageShow', function(e) {
				//				console.log(e.detail.page.id + ' show');
			});
			view.addEventListener('pageBeforeBack', function(e) {
				//				console.log(e.detail.page.id + ' beforeBack');
			});
			view.addEventListener('pageBack', function(e) {
				//				console.log(e.detail.page.id + ' back');
			});
		})(mui);

		mui.ready(function() {
			
			
			
		})
	</script>

</html>